<template>
	<div class="search-container">
		<!-- 
        思维：
          判断是否触发搜索按钮，假如触发了，把isShowResult设置为true
          判断输入框是否有值，假如有值，显示联想的内容
          否则显示显示历史记录
		-->
		<!-- 搜索框部分 -->
		<van-search
			v-model="searchText"
			placeholder="请输入搜索关键词"
			show-action
			@search="onSearch"
			@cancel="$router.back()"
			@focus=" isShowResult = false "
		/>
		<!-- /搜索框部分 -->

		<!-- 内容数据 -->
		<searchResult v-if="isShowResult" :search-text="searchText" />
		<!-- /内容数据 -->

		<!-- 联想数据 -->
		<search-suggestion v-else-if="searchText" :search-text="searchText" @search="onSearch" />
		<!-- /联想数据 -->
		<!-- 浏览历史 -->
		<search-history
			v-else
			:search-histories="searchHistories"
			@search="onSearch"
			@removeAllHistory=" searchHistories = $event "
		/>
		<!-- /浏览历史 -->
	</div>
</template>

<script>
	import searchSuggestion from "./components/search-suggestion";
	import searchHistory from "./components/search-history";
	import searchResult from "./components/search-result";
	import storage from "@/utils/storage";
	import { reqSearchHistories } from "@/api/search";
	import { mapState } from "vuex";
	export default {
		name: "search",
		components: {
			searchSuggestion,
			searchHistory,
			searchResult
		},
		data() {
			return {
				searchText: "", //输入框的内容
				isShowResult: false, //判断是否显示搜索结果
				searchHistories: [] //历史记录的数据
			};
		},
		methods: {
			/* 
			       历史数据持久化的操作：
			        1.无论用户是否登录，把历史记录存储到本地。
			        2.请求用户的历史记录
			        3.判断用户是否登录
			          假如用户登录了，当我们搜索的时候，后端会帮我们把历史记录存储起来，只是数据只能存储4条，
			          我们需要把本地的数据和后端的数据合并
			          
			          假如用户没有登录那么，我们显示本地存储的数据
			     */
			//手机上点击的搜索按钮,触发
			onSearch(searchText) {
				// 改变输入框的文本内容
				this.searchText = searchText;

				// 存储搜索的历史记录
				const index = this.searchHistories.indexOf(searchText);
				if (index !== -1) {
					// 1.判断搜索的历史记录是否存在，假如存在就把它删除掉
					this.searchHistories.splice(index, 1);
				} else {
					// 2.把新数据unshift进此数组
					this.searchHistories.unshift(searchText);
					// 数据持久化，把数据存储到本地
				}

				this.isShowResult = true;
			},
			async loadUserHistories() {
				// 获取本地数据;
				console.log("1111", storage.getToken("search-histories"));
				let searchHistories = storage.getToken("search-histories");
				searchHistories =
					Object.keys(searchHistories).length > 0
						? storage.getToken("search-histories")
						: [];
				// if(this.user){
				//     //用户已经登录
				//     //  线上的历史记录
				//     const { data }  = await reqSearchHistories()
				//     // 利用数组的合并以及set的数组的过滤
				//     searchHistories = [...new Set([...searchHistories,...data.data.keywords])]
				//     // mergeHistories = Object.assign(inlineSearchHistories)
				// }
				this.searchHistories = searchHistories;
			}
		},
		created() {
			this.loadUserHistories();
		},
		computed: {
			...mapState(["user"])
		},
		watch: {
			//监视数据的变化
			searchHistories() {
				storage.setToken("search-histories", this.searchHistories);
			}
		}
	};
</script>

<style lang="less" scoped>
</style>